<!DOCTYPE html>
<html>
    <head>
        <title>Jewelry</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/layout.css" />
        <link type="text/css" rel="stylesheet" href="css/widgets.css" />
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/coin-slider/coin-slider.js"></script>
        <link rel="stylesheet" href="js/coin-slider/coin-slider-styles.css" type="text/css"/>
        <link rel="stylesheet" href="js/treeview/jquery.treeview.css" />
        <script src="js/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/treeview/jquery.treeview.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="../../widget/product_detail/2/js/tinycarousel.css" />
        <script src="../../widget/product_detail/2/js/jquery.tinycarousel.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $ ('.link_list_1 ul.list li').each(function(i){
                    var newClass = '';
       
                    if ((i+1) % 3 == 0) {
                        newClass = 'last';
                    }
                    $(this).addClass(newClass);
        
                });
                
                $ ('.link_list_2 ul.list li:last-child').addClass('last');
                                   
                $ ('.product_feature ul.product_list li').each(function(i){
                    var newClass = '';
       
                    if ((i+1) % 3 == 0) {
                        newClass = 'last';
                    }
                    $(this).addClass(newClass);
        
                });

                $('.banner #banner_wrapper').coinslider({
                    width: 996, 
                    height: 311, 
                    navigation: false, 
                    delay: 2000
                });
                
                $("#vmenu_wi_2 .vmenu_list").treeview({
                    animated:"normal",
                    persist: "cookie"
                });
                
                $("#vmenu_wi_1 .vmenu_list").treeview({
                    animated:"normal",
                    persist: "cookie"
                });
                
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="wrapper_top">
                <div id="hook_header" class="hook">

                    <!-- LOGO WIDGET -->
                    <div id="logo_wi" class="logo">
                        <div class="image_wrapper">
                            <img src="images/logo.png" alt="logo_image"/>
                        </div>
                    </div>
                    <!-- END LOGO WIDGET -->

                    <!-- SEARCH BAR WIDGET -->
                    <div id="search_bar_wi" class="search_bar"> 

                        <form id="searchForm" class="searchForm" action="#" method="post">
                            <div class="search_panel">
                                <input type="text" class="searchText" id="searchText" value="Search Keyword Here ..."/> 
                                <input name="search" type="image" class="buttonSearch" id="buttonSearch" src="images/search_icon.png" value=""/>
                            </div>
                        </form>
                    </div>
                    <!--END SEARCH BAR WIDGET --> 

                    <!-- WIDGET LINK LIST -->
                    <div id="link_list_wi_1" class="link_list_1">
                        <ul class="list">
                            <li>
                                <a href="#">Shipping & return</a>
                            </li>

                            <li>
                                <a href="#">Login</a>
                            </li>

                            <li>
                                <a href="#">Create an account</a>
                            </li>
                        </ul>
                        <!-- End .link_list -->
                    </div>
                    <!-- END WIDGET LINK LIST -->

                    <!-- WIDGET CART BLOCK -->
                    <div id="cart_block_wi" class="cart_block">
                        <div class="image_wrapper">
                            <a href="#"><img src="images/cart_icon.png" alt="cart_image"/></a>    
                        </div>
                        <!-- End #image_wrapper -->
                        <div class="cart_block_infor">
                            <a href="#">Now in your cart<span class="count_products"> 0 </span> <span class="items">items</span></a>
                        </div>    
                        <div class="clear"></div>
                    </div>
                    <!-- END WIDGET CART BLOCK -->
                </div>
                <!-- End #hook_header -->
            </div>
            <!-- End #wrapper_top -->

            <div id="wrapper_main">
                <div id="hook_custom_1" class="hook">
                    <div id="hook_hmenu" class="hook">
                        <!-- HMENU WIDGET -->
                        <div id="hmenu_wi" class="hmenu">
                            <div class="hmenu_wrapper">
                                <ul class="hmenu_list">
                                    <li>
                                        <a href="#" class="active">Home</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>
                                    <li>
                                        <a href="#">News</a>
                                    </li>
                                    <li>
                                        <a href="#">Contact</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>

                                </ul>
                            </div>
                            <!-- End hmenu_wrapper -->
                        </div>
                        <!-- END HMENU WIDGET --> 
                    </div>
                    <!-- End #hook_hmenu -->

                    <div id="hook_sidebar" class="hook">
                        <!-- VMENU WIDGET -->
                        <div id="vmenu_wi_1" class="vmenu">
                            <div class="vmenu_header">
                                Category
                            </div><!-- End .vmenu_header -->

                            <ul class="vmenu_list">
                                <li class="parent"><a href="#">Living room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Sitting room</a></li>
                                <li class="parent"><a href="#">Bath room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Film room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                            </ul><!-- End .vmenu_list -->
                        </div>
                        <!-- End VMENU WIDGET -->

                        <!-- VMENU WIDGET -->
                        <div id="vmenu_wi_2" class="vmenu">
                            <div class="vmenu_header">
                                Category
                            </div><!-- End .vmenu_header -->

                            <ul class="vmenu_list">
                                <li class="parent"><a href="#">Living room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Sitting room</a></li>
                                <li class="parent"><a href="#">Bath room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Film room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                            </ul><!-- End .vmenu_list -->
                        </div>
                        <!-- End VMENU WIDGET -->
                    </div>
                    <!-- END #hook_sidebar -->

                    <div id="hook_custom_2" class="hook">
                        <!-- PRODUCT DETAILS WIDGET -->
                        <div id="product_detail_wi_1" class="product_detail_0">
                            <div id="info_product">
                                <div id="info_product_left">
                                    <script type="text/javascript">
                                        $(document).ready(function(){
                                            $('.product_detail_0 .slider1').tinycarousel();	
                                            $(".img_thumb").click(function(){ 
                                                var attr= $(this).attr('href');
                                                $('#product_detail_wi_1 #img_product .grand_img').attr('src',attr);
                                                return false;
                                            });
                                        });
                                    </script>

                                    <div id="img_product"><a href="images/p1.jpg" ><img src="images/p1.jpg" alt=""/></a></div>
                                    <div class="slider1 list_img" >
                                        <a class="buttons prev" href="#">left</a>
                                        <div class="viewport">
                                            <ul class="overview">
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                                <li><a class="img_thumb" href="images/p1.jpg" rel="image_group"><img src="images/p1.jpg" alt=""/></a></li>
                                            </ul>
                                        </div>
                                        <a class="buttons next" href="#">right</a>
                                    </div>	
                                </div>
                                <!--END info_product_left-->	
                                <div id="info_product_right">
                                    <div class="title_product_wrapper">
                                        <div id="title_product">eGo-C A type atomizer pack</div>
                                        <div id="id_product">Product: BB-ELKFF</div>
                                    </div>
                                    <!-- End .title_product_wrapper -->
                                    <div class="price_infor_wrapper">
                                        <div class="price_infor">
                                            <span class="old_price">24,50 €</span>
                                            <span class="price">20,50 €</span>
                                        </div>
                                        <!-- End .price_infor_wrapper -->
                                        <div class="add_to_cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="resume_product">Precious metals have always been a detector of 
                                        prosperity and high social rank. Just remember that jewelry was always a very inaccessible good for ordinary people. Only kings and emperors, priests and pirates could own the jewelry. Ancients believed that precious stones have always had some magical power that is why jewelry was so rare and prohibitive. Probably we have inherited this weakness. </div>
                                    <div class="stock_product">Disponibilité : En stock !</div>
                                    <div class="block_info_product">
                                        <div class="ref">Référence : 001752</div>
                                        <table id="table_attribut">
                                            <tr>
                                                <td width="100px"><span class="attribut_product">Couleur</span></td><td>
                                                    <select name="color">
                                                        <option value="1">blue</option>
                                                        <option value="1">blue</option>
                                                        <option value="1">blue</option>
                                                        <option value="1">blue</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><span class="attribut_product">Quantité</span></td><td>
                                                    <select name="color">
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                    </select>
                                                </td>
                                        </table>
                                    </div>
                                    <!--END block_info_product-->

                                </div>
                                <!--END info_product_right-->
                            </div>
                            <!--END info_product-->	
                        </div>
                        <!-- END PRODUCT DETAILS WIDGET -->

                        <!-- PRODUCT RELATED WIDGET -->
                        <div id="product_detail_wi_1" class="product_related_1">
                            <div id="product_related_wrapper">
                                <h1 class="title">You may like...</h1>
                                <ul class="product_related_list">
                                    <li>
                                        <a href="#" class="image"><img src="images/product_related.png" alt="product_related_image" /></a>
                                        <a href="#" class="name">Laoreet dolore magnaorem ipsum </a>
                                        <div class="price">
                                            <span>199$</span>
                                        </div>
                                        <!-- End .price -->
                                    </li>

                                    <li>
                                        <a href="#" class="image"><img src="images/product_related.png" alt="product_related_image" /></a>
                                        <a href="#" class="name">Laoreet dolore magnaorem ipsum dolor ser adipiscing elit</a>
                                        <div class="price">
                                            <span>199$</span>
                                        </div>
                                        <!-- End .price -->
                                    </li>

                                    <li>
                                        <a href="#" class="image"><img src="images/product_related.png" alt="product_related_image" /></a>
                                        <a href="#" class="name">Laoreet dolore magnaorem ipsum dolor ser adipiscing elit Laoreet dolore magnaorem ipsum dolor ser adipiscing elit Laoreet dolore magnaorem ipsum dolor ser adipiscing elit</a>
                                        <div class="price">
                                            <span>199$</span>
                                        </div>
                                        <!-- End .price -->
                                    </li>
                                </ul>
                                <!-- End .list -->
                            </div>
                            <!-- END #product_related_wrapper -->
                        </div>
                        <!-- END PRODUCT RELATED WIDGET -->
                    </div>
                    <!-- END #hook_custom_2 -->
                    <div class="clear"></div>
                </div>
                <!-- End #hook_custom_1 -->

            </div>
            <!-- End #wrapper_main -->
            <div id="wrapper_footer">
                <div id="hook_footer" class="hook">
                    <!-- HTML widget -->
                    <div id="html_wi_1" class="html_1">
                        <a href="#"><img src="images/logo_small.png" alt="logo_small"/></a>
                    </div>
                    <!-- END HTML WIDGET -->

                    <!-- LINK LIST WIDGET -->
                    <div id="link_list_wi_2" class="link_list_2">
                        <ul class="list">
                            <li><a href="#">Lorem ipsum dolor</a></li>
                            <li><a href="#">Lorem ipsum dolor</a></li>
                            <li><a href="#">Lorem ipsum dolor</a></li>
                        </ul>
                    </div>
                    <!-- END LINK LIST WIDGET -->

                    <!-- FOOTER WIDGET -->
                    <div id="footer_wi_1" class="footer">
                        <p>©2012 POWERED BY JEWELRY™. ALL RIGHT RESERVED.</p>
                    </div>
                    <!-- END FOOTER WIDGET -->
                </div>
                <!-- End #hook_footer -->
            </div>
        </div>    
        <!-- End #wrapper -->
    </body>
</html>





















